<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cesiumjs.org/releases/1.51/Build/Cesium/Cesium.js"></script>
  <link href="https://cesiumjs.org/releases/1.51/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <style>
    html,
    body,
    #cesiumContainer {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    .canvas {
      display: none;
    }
  </style>
</head>

<body>
  <div id="cesiumContainer"></div>
  <canvas id="canvas-a" class="canvas" width="102" height="102" />
  <canvas id="canvas-b" class="canvas" width="102" height="102" />
  <script>
    // 去 Cesium ion 申请一个免费token
    const token = 'your token'
    Cesium.Ion.defaultAccessToken = token;
    var viewer = new Cesium.Viewer('cesiumContainer')

    // canvas 动画
    function drawCanvas(time, result) {
      if (!this.curCanvas) this.curCanvas = 'a'
      if (!this.offset) this.offset = 0
      const canvas = document.getElementById('canvas-' + this.curCanvas) // 不停切换canvas对象
      const center_x = canvas.width / 2
      const center_y = canvas.height / 2
      const step = Math.PI * 0.006

      var context = canvas.getContext('2d')
      context.clearRect(0, 0, canvas.width, canvas.height)
      context.beginPath()

      // 填充背景色
      context.arc(center_x, center_y, 50, 0, 2 * Math.PI)
      context.fillStyle = 'rgba(0, 0, 0, 0.5)'
      context.fill()
      context.strokeStyle = '#1E90FF'
      // 画点
      context.lineWidth = 2
      for (let curr = 0 + this.offset; curr < 2 * Math.PI; curr += Math.PI * 0.06) {
        context.beginPath()
        context.arc(center_x, center_y, 45, curr, curr + 2 * Math.PI * 0.01)
        context.stroke()
        context.closePath()
      }
      context.strokeStyle = '#ffffFF'
      for (let curr = 2 * Math.PI - this.offset; curr > 0; curr -= Math.PI * 0.06) {
        context.beginPath()
        context.arc(center_x, center_y, 40, curr, curr - 2 * Math.PI * 0.01, true)
        context.stroke()
        context.closePath()
      }
      // 切换标识，进而切换canvas对象
      this.curCanvas = this.curCanvas === 'a' ? 'b' : 'a'
      this.offset = this.offset > 0.1 * Math.PI ? 0 : this.offset + step
      return canvas
    }
    // 添加entity
    var entity = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(120.0, 60.0),
      ellipse: {
        height: 0.0,
        semiMinorAxis: 1000.0,
        semiMajorAxis: 1000.0,
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000),
        material: new Cesium.ImageMaterialProperty({
          image: new Cesium.CallbackProperty(drawCanvas, false),
          transparent: true
        })
      }
    });
    viewer.flyTo(entity, {
      offset: {
        heading: 0,
        pitch: Cesium.Math.toRadians(-50),
        range: 15000
      }
    })
  </script>
</body>

</html>